<template>
      <van-button
        class="follow-btn"
        type="default"
        round
        size="small"
        icon="plus"
        v-if="isFollowed"
        @click="onFollow"
        :loading="isLoading"
      >已关注</van-button>
      <van-button
        class="follow-btn"
        type="info"
        color="#3296fa"
        round
        size="small"
        icon="plus"
        v-else
        @click="onFollow"
        :loading="isLoading"
      >关注</van-button>
</template>
<script>
import { addFollow, deleteFollow } from '@/api/user'
export default {
  props: {
    isFollowed: {
      type: Boolean,
      required: true
    },
    aut_id: {
      type: [Number, String, Object],
      required: true
    }
  },
  data () {
    return {
      isLoading: false
    }
  },
  methods: {
    async onFollow () {
      this.isLoading = true // 开启loading效果

      if (this.isFollowed === true) { // 说明当前是已关注，我们要做的事情是取消关注
        try {
          await deleteFollow(this.aut_id)
        } catch (err) {
        }
      } else if (this.isFollowed === false) { // 当前是未关注，我们要做的事情是关注
        try {
          await addFollow(this.aut_id)
        } catch (err) {
          console.log(err)
          if (err.response.status === 400) {
            this.$toast.fail('自己不能关注自己')
            return
          }
          this.$toast.fail('关注失败')
        }
      }

      this.$emit('update:isFollowed', !this.isFollowed)

      this.isLoading = false // 关闭loading效果
    }
  }
}
</script>
<style scoped lang="less">
.follow-btn {
  width: 170px;
  height: 58px;
}
</style>
